import {
    Row,
    Col,
    Flex,
    Typography,
    Button,
    Form,
    Input,
    Divider,
    Radio,
    Select,
    Modal,
    TreeSelect,
    Transfer,
    Table,
    Cascader,
    Tree
} from 'antd'
import React, {useEffect, useState} from 'react'
import {regionData} from '../utils/region'
import {useParams} from 'react-router-dom'
import {adminActivatyInfo} from '../service/activaty'
import {shopList} from '../service/shop'
import MyDatePicker from '../components/MyDatePicker'
import {DeleteOutlined, PlusSquareOutlined} from '@ant-design/icons'

export default function TagAdd() {
    const {id} = useParams() // 获取路由参数中的id
    const isEditing = id !== undefined // 根据id是否存在判断是编辑还是添加
    const [form] = Form.useForm()

    // 保存选择的日期
    const [selectedDateString, setSelectedDateString] = useState(null)
    // 穿梭机数据
    const [mockData, setMockData] = useState([
        {
            key: '1',
            title: '中关村1店',
            chosen: false
        },
        {
            key: '2',
            title: '中关村2店',
            chosen: true
        },
        {
            key: '3',
            title: '中关村3店',
            chosen: false
        }
    ])

    const treeData2 = [
        {
            title: '内容标签',
            value: '0-0',
            disabled: true,
            children: [
                {
                    title: '美食',
                    value: '0-0-1'
                },
                {
                    title: '旅游',
                    value: '0-0-2'
                },
                {
                    title: '娱乐',
                    value: '0-0-3'
                },
                {
                    title: '文化',
                    value: '0-0-4'
                },
                {
                    title: '音乐',
                    value: '0-0-5'
                }
            ]
        },
        {
            title: '用户标签',
            value: '0-1',
            disabled: true, // 禁用一级菜单项Node2的选择
            children: [
                {
                    title: '富二代',
                    value: '0-1-1'
                },
                {
                    title: '羊毛党',
                    value: '0-1-2'
                },
                {
                    title: '铁公鸡',
                    value: '0-1-3'
                },
                {
                    title: '购物狂',
                    value: '0-1-4'
                }
            ]
        }
    ]

    // 树形数据
    const treeData = [
        {
            title: (
                <Select options={[{value: '且', label: '且'}]} defaultValue="且"/>
            ),
            key: '0-0',
            children: [
                {
                    title: (
                        <Select
                            options={[{value: '或', label: '或'}]}
                            defaultValue="或"
                        />
                    ),
                    key: '0-0-0',
                    isLeaf: true,
                    children: [
                        {
                            title: (
                                <>
                                    <Select
                                        options={[{value: '0', label: '行为'}]}
                                        defaultValue="0"
                                        style={{width: 70, marginRight: 10}}
                                    />
                                    <Select
                                        options={[{value: '0', label: '对象'}]}
                                        defaultValue="0"
                                        style={{width: 70, marginRight: 10}}
                                    />
                                    <Select
                                        options={[{value: '0', label: '数值'}]}
                                        defaultValue="0"
                                        style={{width: 70, marginRight: 10}}
                                    />
                                    <Select
                                        options={[{value: '0', label: '等于'}]}
                                        defaultValue="0"
                                        style={{width: 70, marginRight: 10}}
                                    />
                                    <Input type="number" style={{width: 70}} value={1}/>
                                </>
                            ),
                            key: '0-0-0-0'
                        },
                        {
                            title: (
                                <>
                                    <Select
                                        options={[{value: '0', label: '行为'}]}
                                        defaultValue="0"
                                        style={{width: 70, marginRight: 10}}
                                    />
                                    <Select
                                        options={[{value: '0', label: '对象'}]}
                                        defaultValue="0"
                                        style={{width: 70, marginRight: 10}}
                                    />
                                    <Select
                                        options={[{value: '0', label: '数值'}]}
                                        defaultValue="0"
                                        style={{width: 70, marginRight: 10}}
                                    />
                                    <Select
                                        options={[{value: '0', label: '等于'}]}
                                        defaultValue="0"
                                        style={{width: 70, marginRight: 10}}
                                    />
                                    <Input
                                        type="number"
                                        style={{width: 70, marginRight: 10}}
                                        value={1}
                                    />
                                    <DeleteOutlined style={{marginRight: 10, color: '#999'}}/>
                                    <PlusSquareOutlined
                                        style={{marginRight: 10, color: '#999'}}
                                    />
                                </>
                            ),
                            key: '0-0-0-1'
                        }
                    ]
                },
                {
                    title: (
                        <>
                            <Select
                                options={[{value: '0', label: '行为'}]}
                                defaultValue="0"
                                style={{width: 70, marginRight: 10}}
                            />
                            <Select
                                options={[{value: '0', label: '对象'}]}
                                defaultValue="0"
                                style={{width: 70, marginRight: 10}}
                            />
                            <Select
                                options={[{value: '0', label: '数值'}]}
                                defaultValue="0"
                                style={{width: 70, marginRight: 10}}
                            />
                            <Select
                                options={[{value: '0', label: '等于'}]}
                                defaultValue="0"
                                style={{width: 70, marginRight: 10}}
                            />
                            <Input
                                type="number"
                                style={{width: 70, marginRight: 10}}
                                value={1}
                            />
                            <DeleteOutlined style={{marginRight: 10, color: '#999'}}/>
                            <PlusSquareOutlined style={{marginRight: 10, color: '#999'}}/>
                        </>
                    ),
                    key: '0-0-1',
                    isLeaf: true
                },
                {
                    title: (
                        <>
                            <Select
                                options={[{value: '0', label: '行为'}]}
                                defaultValue="0"
                                style={{width: 70, marginRight: 10}}
                            />
                            <Select
                                options={[{value: '0', label: '对象'}]}
                                defaultValue="0"
                                style={{width: 70, marginRight: 10}}
                            />
                            <Select
                                options={[{value: '0', label: '数值'}]}
                                defaultValue="0"
                                style={{width: 70, marginRight: 10}}
                            />
                            <Select
                                options={[{value: '0', label: '等于'}]}
                                defaultValue="0"
                                style={{width: 70, marginRight: 10}}
                            />
                            <Input
                                type="number"
                                style={{width: 70, marginRight: 10}}
                                value={1}
                            />
                            <DeleteOutlined style={{marginRight: 10, color: '#999'}}/>
                            <PlusSquareOutlined style={{marginRight: 10, color: '#999'}}/>
                        </>
                    ),
                    key: '0-0-2',
                    isLeaf: true
                },
                {
                    title: (
                        <PlusSquareOutlined style={{marginRight: 10, color: '#999'}}/>
                    ),
                    key: '0-0-3',
                    isLeaf: true
                }
            ]
        }
    ]
    useEffect(() => {
        // 获取所有店铺
        ;(async () => {
            const res = await shopList({
                pageNo: 1,
                pageSize: 1000
            })
            console.log(res)
            const arr = res.data.objects.map((item) => {
                return {
                    key: item.id,
                    title: item.storeName,
                    chosen: false
                }
            })
            setMockData(arr)
        })()
        if (isEditing) {
            ;(async () => {
                const res = await adminActivatyInfo(id)
                console.log(res)
                // 给表单赋值
                form.setFieldsValue(res.data)
            })()
        } else {
        }
    }, [])
    return (
        <>
            <Row className="info">
                <Col span={24}>
                    <Flex justify={'space-between'}>
                        <Typography.Title level={3}>新建用户标签</Typography.Title>
                    </Flex>
                </Col>
            </Row>
            <Form
                labelCol={{
                    span: 2
                }}
                wrapperCol={{
                    span: 12
                }}
                style={{width: '100%', marginTop: 30}}
                form={form}
            >
                <Row className="container" style={{marginBottom: 0, marginTop: 0}}>
                    <Col span={24}>
                        <Typography.Title level={4}>基本信息</Typography.Title>
                    </Col>
                    <Col span={24}>
                        <Form.Item label="标签分组">
                            <TreeSelect
                                style={{
                                    width: 300
                                }}
                                dropdownStyle={{
                                    maxHeight: 400,
                                    overflow: 'auto'
                                }}
                                treeData={treeData2}
                                placeholder="请选择分组"
                                treeDefaultExpandAll
                            />
                        </Form.Item>
                        <Form.Item label="标签名称">
                            <Input placeholder="请输入标签名称" style={{width: 300}}/>
                        </Form.Item>
                        <Form.Item label="标签管理名称">
                            <Input
                                placeholder="支持字母，数字，下划线"
                                style={{width: 300}}
                            />
                        </Form.Item>
                        <Form.Item label="描述" name="describes">
                            <Input.TextArea
                                style={{height: 120, width: 400, resize: 'none'}}
                            />
                        </Form.Item>
                        <Form.Item label="门店状态" initialValue={1}>
                            <Radio.Group>
                                <Radio value={1}>开启</Radio>
                                <Radio value={2}>关闭</Radio>
                            </Radio.Group>
                        </Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col>
                        <Divider style={{margin: 0}}/>
                    </Col>
                </Row>
                <Row className="container" style={{marginTop: 0, marginBottom: 0}}>
                    <Col span={24}>
                        <Typography.Title level={4}>基础属性</Typography.Title>
                    </Col>
                    <Col span={24}>
                        <Form.Item label="性别">
                            <Select
                                placeholder="请选择"
                                style={{width: 300}}
                                options={[
                                    {
                                        label: '男',
                                        value: '男'
                                    },
                                    {
                                        label: '女',
                                        value: '女'
                                    }
                                ]}
                            />
                        </Form.Item>
                        <Form.Item label="年龄">
                            <Input
                                type="number"
                                style={{width: 100}}
                                placeholder="请输入"
                            />
                            <span style={{margin: '0 10px'}}>-</span>
                            <Input
                                type="number"
                                style={{width: 100}}
                                placeholder="请输入"
                            />
                        </Form.Item>
                        <Form.Item label="常驻地区">
                            <Cascader
                                options={regionData}
                                onChange={(value) => {
                                }}
                                placeholder="请选择查询的省/市/区县"
                                style={{width: 280}}
                            />
                        </Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col>
                        <Divider style={{margin: 0}}/>
                    </Col>
                </Row>
                <Row className="container" style={{marginTop: 0, marginBottom: 0}}>
                    <Col span={24}>
                        <Typography.Title level={4}>特征规则</Typography.Title>
                    </Col>
                    <Col span={24} style={{marginTop: 20}}>
                        <Form.Item initialValue={'0'} label="时间段">
                            <Radio.Group buttonStyle="solid" style={{marginRight: 20}}>
                                <Radio.Button value="0">相同时间段</Radio.Button>
                                <Radio.Button value="1">不同时间段</Radio.Button>
                            </Radio.Group>
                            <MyDatePicker
                                selectedDateString={selectedDateString}
                                setSelectedDateString={setSelectedDateString}
                            />
                        </Form.Item>
                        <Form.Item label="标签规则">
                            <Tree
                                // checkable
                                defaultExpandAll
                                onCheck={(checkedKeys) => {
                                    console.log('onCheck', checkedKeys)
                                }}
                                onSelect={(selectedKeys, info) => {
                                    console.log('selected', selectedKeys, info)
                                }}
                                treeData={treeData}
                            />
                        </Form.Item>
                        <Form.Item label=" " colon={false} name="beizhu">
                            <Button type="primary" htmlType="submit">
                                发布
                            </Button>
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
        </>
    )
}
